<TabView #tabView class="tab-view" sdkExampleTitle sdkToggleNavButton>
    <GridLayout *tabItem="{title: 'Basic cards list'}">
        <!-- >> ext-listview-cards-lines-html -->
        <ListView class="list-group" [items]="countries" (itemTap)="onItemTapFirstList($event)" separatorColor="white">
            <ng-template let-country="item">
                <GridLayout rows="* auto" columns="*" class="list-group-item active" style="border:1;"> 
                    <Image row="0" col="0" [src]="country.imageSrc"></Image>
                    <StackLayout row="1" col="0" backgroundColor="white" class="list-group-item">
                        <Label class="list-group-item-heading" [text]="country.name"></Label>
                        <Label class="list-group-item-text" [text]="'Continent: '+country.continent"></Label>      
                    </StackLayout>
                </GridLayout>
            </ng-template>
        </ListView>
        <!-- << ext-listview-cards-lines-html -->
    </GridLayout>
    <GridLayout *tabItem="{title: 'Thumbnails'}">
        <!-- >> ext-listview-thumbs-cards-lines-html -->
        <ListView class="list-group" [items]="countries" (itemTap)="onItemTapThirdList($event)" >
            <ng-template let-country="item">
                <StackLayout orientation="horizontal" class="list-group-item">
                    <Image row="0" col="0" rowSpan="2" height="108" width="108"  [src]="country.imageSrc" class="thumb p-16"></Image>
                    <GridLayout class="list-group-item" rows="auto *" columns="*">
                        <Label row="0" col="0" [text]="country.name" class="list-group-item-heading"></Label>
                        <Label row="1" col="0" class="list-group-item-text" [text]="'Continent: '+country.continent "></Label>   
                    </GridLayout>
                </StackLayout>
            </ng-template>
        </ListView>
        <!-- << ext-listview-thumbs-cards-lines-html -->
    </GridLayout>
</TabView>


